<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div style="font-size:20px;margin-bottom:20px;">监控列表</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入监测点名称、项目名称" size="small" v-model="name" clearable @keyup.enter.native="getList(1)">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="12.5" style="float: right;">
          <el-button @click="look" size="small" >视频墙</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 --> 
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="监测点名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceSerial" label="设备号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelNo" label="通道号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="address" label="安装位置" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="detail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
         <el-form
            :label-position="labelPosition"
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            size="small"
            style="width:380px;margin: 0 auto;"
          >
            <div >
              <el-form-item label="监测点名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="所属项目" prop="pid">
                <el-select v-model="form.pid" placeholder="请选择所属项目" style="width:280px;" filterable>
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="RTMP地址" prop="rtmp">
                <el-input v-model="form.rtmp"></el-input>
              </el-form-item>
              <el-form-item label="HLS地址" prop="url">
                <el-input v-model="form.url"></el-input>
              </el-form-item>
              <el-form-item label="安装地址" prop="address">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
               <el-form-item label="设备号" prop="deviceSerial">
                <el-input v-model="form.deviceSerial"></el-input>
              </el-form-item>
               <el-form-item label="通道号" prop="channelNo">
                <el-input v-model="form.channelNo"></el-input>
              </el-form-item>
            </div>
          </el-form>
           <div slot="footer" class="dialog-footer botton_btn">
                <el-button type="primary" @click="save" size="small" style="margin-right:40px;">保 存</el-button>
                <el-button @click="cancel" size="small">取 消</el-button>
            </div>
    </el-dialog>
<!-- 查看监控 -->
    <el-dialog title="" :visible.sync="dialogFormVisible1">
      <iframe
          :src="url"
          width="100%"
          height="650"
          id="ysOpenDevice"
          allowfullscreen
          style="margin-top: 20px;"
        >
        </iframe>
    </el-dialog>
  </div>
</template>

<script>
  import base from "../api/base"
export default {
  data() {
    return {
      url:'',
      name:'',
      tableData: [],
      //   分页
      currentPage: 1,
      pageSize:10,
      total: 0,
      dialogFormVisible: false, // 弹框是否显示
      dialogFormVisible1: false, // 弹框是否显示
      title: '添加监控',
      labelPosition: "left", // 表单标签文字位置
      form: {
          name:'',
          address: '',
          rtmp:'',
          url:'',
          pid: '',
          channelNo: '',
          deviceSerial: ''
      },
      id: '',
      options: [],
      rules: {
        name: [
          { required: true, message: '请输入监测点名称', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    look(){
        let token  = window.localStorage.getItem("token")
        window.location.href = `${base.spurl}/ncpr-lv/monitor?token=${token}&path=videoList`
      },
    //查询所有项目 
    find() {
      this.$api.loginhome.findAllNcpr().then(res => {
        if(res.success) {
          this.options = res.data
        }
      })
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    cancel() {
      this.dialogFormVisible = false
      this.$refs['form'].resetFields()
    },
    //保存新增
    save() {
       this.$refs['form'].validate((valid) => {
        if(valid) {
        if(this.title === '添加监测') {
            this.$api.loginhome.save(this.form).then(res => {
                if(res.success) {
                    this.$message.success('添加监测成功')
                    this.dialogFormVisible = false
                    this.$refs['form'].resetFields();
                    this.getList()
                } else {
                    this.$message.error(res.message)
                }
            })
        } else {
            this.$api.loginhome.update({...this.form, id:this.id}).then(res => {
                if(res.success) {
                    this.$message.success('修改成功')
                    this.dialogFormVisible = false
                    this.$refs['form'].resetFields()
                    this.getList()
                } else {
                    this.$message.error(res.message)
                }
            })
        }
        } else {
            return false
        }
       })
    },
    //查看查看详情
    detail(row) {
      console.log(row,'11111111111')
      // this.$router.push({path:'/addVideo',query:{url: row.url}})

      this.$api.loginhome.tokenMonitor({
          pid: row.pid
        }).then((res) => {
          console.log(res);
          this.dialogFormVisible1 = true
          if (row.monitorType == 1) {
            this.succ = true
            this.url = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${row.deviceSerial}/${row.channelNo}.live&accessToken=${res.data}&templete=2`
            // this.$router.push({
            //   path: "/addVideo",
            //   query: {
            //     deviceSerial: row.deviceSerial,
            //     channelNo: row.channelNo,
            //     videoToken: res.data,
            //     monitorType: row.monitorType,
            //   },
            // });
          } else {
            this.succ = false
            this.errFn(row.deviceSerial,row.channelNo,row.pid)
            // this.$router.push({
            //   path: "/addVideoLc",
            //   query: {
            //     deviceSerial: row.deviceSerial,
            //     channelNo: row.channelNo,
            //     videoToken: res.data,
            //     monitorType: row.monitorType,
            //     pid: row.pid
            //   },
            // });
            // this.$message.error(res.message);
          }
        });

    },
    //刷新列表
    getList(val) {
      if(val) {
          this.currentPage = 1
      }
      let params = {
          name: this.name,
          start: this.currentPage - 1,
          pageSize: this.pageSize
      }
      this.$api.loginhome.page(params)
      .then(res => {
        this.tableData = res.data
        this.total = res.recordsTotal
        this.find()
      })
      .catch(() => {
      });
    },
  },
  created() {
    this.getList()
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
